<template>
    <div class="mapBox">
        <div>
        <button   @click="geojsonPoint" >geojson点</button>
        <button   @click="showData" >showData</button>
        <button   @click="addMarkersTest" >addMarkersTest</button>
</div> 
      <!-- 地图容器 -->
      <div id="map"></div>
    </div>
  </template>
   
  <script>
import L from 'leaflet';
import 'leaflet/dist/leaflet.css';
import 'leaflet.pm'
import 'leaflet.pm/dist/leaflet.pm.css'
//import wmts from 'leaflet.wmts/dist/leaflet.wmts.js';
//import LWMS from "leaflet-wms/leaflet.wms.js";
import { point } from "../../data/json/point";

export default {
    name: 'LeafletMap',
    data() {
        return {
            map: null,
            citiesLayer: null,
            lyaers:[],
        }
    },
    mounted() {
        // 地图初始化
        this.initMap()
    },
    methods: {
        // 使用id为map的div容器初始化地图，同时指定地图的中心点和缩放级别
        initMap() {
            let map = L.map("map", { 
                center: [45.63, 122.83], // 中心位置
                zoom: 6, // 缩放等级
                attributionControl: true, // 版权控件
                zoomControl: true //缩放控件
            });
            this.map = map; // data上需要挂载
            var mapLayer_01 = L.tileLayer(
                "http://t{s}.tianditu.gov.cn/img_w/wmts?tk=cc4cd5c306fa05a68c0d7f64f98e32d8&SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}",
                {
                    subdomains: [0],
                })	
            mapLayer_01.addTo(map)

            var markers = []

            //利用marker数组构建marker图层
            this.citiesLayer = L.layerGroup(markers)
            this.citiesLayer.addTo(this.map)
        },
        geojsonPoint(){
            console.log(point)
            var that = this;
            //先定义点的样式
            var geojsonMarkerOptions = {
                radius: 10,
                fillColor: "#ff7800",
                color: "blue",
                weight: 1,
                opacity: 1,
                fillOpacity: 0.6
            };

            var layer = L.geoJson(point, {
            pointToLayer: function (feature, latlng) {
              return L.circleMarker(latlng, geojsonMarkerOptions);
            }
            }).addTo(that.map);

        },
        showData(){
            console.log(124)
            let me = this;
            let listData1 = [{"accumulatedTemperature":"2765.2","stationId":"50936","stationName":"白城","lon":"122.83","lat":"45.63"},{"accumulatedTemperature":"2836.5","stationId":"50939","stationName":"洮南","lon":"122.82","lat":"45.33"},{"accumulatedTemperature":"2728","stationId":"50940","stationName":"镇赉","lon":"123.17","lat":"45.85"},{"accumulatedTemperature":"2839.6","stationId":"50945","stationName":"大安","lon":"124.27","lat":"45.5"},{"accumulatedTemperature":"2895.4","stationId":"50946","stationName":"松原","lon":"124.83","lat":"45.18"},{"accumulatedTemperature":"2966.7","stationId":"50948","stationName":"乾安","lon":"124.02","lat":"45"},{"accumulatedTemperature":"2901.6","stationId":"50949","stationName":"前郭","lon":"124.87","lat":"45.08"},{"accumulatedTemperature":"2954.3","stationId":"54041","stationName":"通榆","lon":"123.07","lat":"44.8"},{"accumulatedTemperature":"3016.3","stationId":"54049","stationName":"长岭","lon":"123.97","lat":"44.25"},{"accumulatedTemperature":"2724.9","stationId":"54063","stationName":"扶余","lon":"126","lat":"44.97"},{"accumulatedTemperature":"2864.4","stationId":"54064","stationName":"农安","lon":"125.16","lat":"44.38"},{"accumulatedTemperature":"2771.4","stationId":"54065","stationName":"德惠","lon":"125.6","lat":"44.53"},{"accumulatedTemperature":"2743.5","stationId":"54069","stationName":"九台","lon":"125.8","lat":"44.17"},{"accumulatedTemperature":"2653.6","stationId":"54072","stationName":"榆树","lon":"126.52","lat":"44.85"},{"accumulatedTemperature":"2566.8","stationId":"54076","stationName":"舒兰","lon":"126.93","lat":"44.42"},{"accumulatedTemperature":"3010.1","stationId":"54142","stationName":"双辽","lon":"123.53","lat":"43.5"},{"accumulatedTemperature":"2914","stationId":"54154","stationName":"梨树","lon":"124.3","lat":"43.35"},{"accumulatedTemperature":"2855.1","stationId":"54156","stationName":"公主岭","lon":"124.8","lat":"43.52"},{"accumulatedTemperature":"2886.1","stationId":"54157","stationName":"四平","lon":"124.33","lat":"43.17"},{"accumulatedTemperature":"2833.4","stationId":"54161","stationName":"长春","lon":"125.22","lat":"43.9"},{"accumulatedTemperature":"2743.5","stationId":"54164","stationName":"伊通","lon":"125.28","lat":"43.35"},{"accumulatedTemperature":"2693.9","stationId":"54165","stationName":"双阳","lon":"125.63","lat":"43.55"},{"accumulatedTemperature":"2591.6","stationId":"54169","stationName":"烟筒山","lon":"126.02","lat":"43.3"},{"accumulatedTemperature":"2560.6","stationId":"54171","stationName":"永吉","lon":"126.52","lat":"43.7"},{"accumulatedTemperature":"2597.8","stationId":"54172","stationName":"吉林城郊","lon":"126.6","lat":"43.78"},{"accumulatedTemperature":"2442.8","stationId":"54181","stationName":"蛟河","lon":"127.33","lat":"43.7"},{"accumulatedTemperature":"2359.1","stationId":"54186","stationName":"敦化","lon":"128.2","lat":"43.37"},{"accumulatedTemperature":"2365.3","stationId":"54187","stationName":"安图","lon":"128.92","lat":"43.12"},{"accumulatedTemperature":"2396.3","stationId":"54195","stationName":"汪清","lon":"129.78","lat":"43.3"},{"accumulatedTemperature":"2724.9","stationId":"54260","stationName":"辽源","lon":"125.08","lat":"42.92"},{"accumulatedTemperature":"2628.8","stationId":"54261","stationName":"东丰","lon":"125.52","lat":"42.68"},{"accumulatedTemperature":"2535.8","stationId":"54263","stationName":"磐石","lon":"126.05","lat":"42.97"},{"accumulatedTemperature":"2573","stationId":"54266","stationName":"梅河口","lon":"125.63","lat":"42.53"},{"accumulatedTemperature":"2529.6","stationId":"54267","stationName":"柳河","lon":"125.73","lat":"42.25"},{"accumulatedTemperature":"2433.5","stationId":"54273","stationName":"桦甸","lon":"126.75","lat":"42.98"},{"accumulatedTemperature":"2511","stationId":"54274","stationName":"辉南","lon":"126.07","lat":"42.68"},{"accumulatedTemperature":"2387","stationId":"54276","stationName":"靖宇","lon":"126.82","lat":"42.35"},{"accumulatedTemperature":"2356","stationId":"54284","stationName":"东岗","lon":"127.5","lat":"42.15"},{"accumulatedTemperature":"2356","stationId":"54285","stationName":"二道","lon":"128.12","lat":"42.42"},{"accumulatedTemperature":"2390.1","stationId":"54286","stationName":"和龙","lon":"129","lat":"42.53"},{"accumulatedTemperature":"2393.2","stationId":"54290","stationName":"龙井","lon":"129.4","lat":"42.77"},{"accumulatedTemperature":"2418","stationId":"54291","stationName":"珲春","lon":"130.28","lat":"42.9"},{"accumulatedTemperature":"2390.1","stationId":"54292","stationName":"延吉","lon":"129.5","lat":"42.87"},{"accumulatedTemperature":"2405.6","stationId":"54293","stationName":"图们","lon":"129.83","lat":"42.95"},{"accumulatedTemperature":"2517.2","stationId":"54362","stationName":"通化县","lon":"125.73","lat":"41.67"},{"accumulatedTemperature":"2492.4","stationId":"54363","stationName":"通化","lon":"125.9","lat":"41.68"},{"accumulatedTemperature":"2418","stationId":"54371","stationName":"白山","lon":"126.43","lat":"41.93"},{"accumulatedTemperature":"2377.7","stationId":"54374","stationName":"临江","lon":"126.88","lat":"41.8"},{"accumulatedTemperature":"2514.1","stationId":"54377","stationName":"集安","lon":"126.15","lat":"41.1"},{"accumulatedTemperature":"2408.7","stationId":"54386","stationName":"长白","lon":"128.18","lat":"41.42"}];

          for (var i = 0; i < listData1.length; i++) {
            var e = listData1[i]
            var addedMarkers = L.circleMarker([e.lat, e.lon], {
              stroke: true,
              color: '#fff',
              weight: 2,
              opacity: 1,
              fillColor: '#1890FF',
              fillOpacity: 1,
              radius: 5.5,
            }).addTo(me.citiesLayer)
            var stationName = e.stationName;
            var accumulatedTemperature = e.accumulatedTemperature
            var myIcon = L.divIcon({
              html:
                '<span style="color: #fff;text-shadow: 0px 0px 3px #000000; font-weight:bold;font-size:15px;padding:10px 0 0 10px;vertical-align:-9px">' +
                stationName+accumulatedTemperature +
                '</span>',
              className: 'my-div-icon',
              iconSize: [80, 171], //marker宽高
              iconAnchor: [0, 17], //文字标注相对位置
              iconSize: 80,
            })
            L.marker([e.lat, e.lon], { icon: myIcon }).addTo(me.citiesLayer)
          }
        },
        addMarkers(layerName,points){
          let me = this;
          let polygon = L.polygon ([[42.363549694613,119.13268651783429],[42.56145950935562,119.13268651783429],[42.56145950935562,119.40888253508969],[42.363549694613,119.40888253508969]], {});
        
          
          if(!this.lyaers[layerName]){
            this.lyaers[layerName] = L.layerGroup();

            for (let l of points) {
              var addedMarkers = L.circleMarker([l.lat, l.lng], {
                  stroke: true,
                  color: '#fff',
                  weight: 1,
                  opacity: 1,
                  fillColor: "#7ED321",
                  fillOpacity: 1,
                  radius: 5.5,
                  name: l.name,
                  PH:l.PH,
                  K:l.K,
                  N:l.N,
                  P:l.P,
                  organic:l.organic,
                })

                addedMarkers.on('click', function (e) {
                  console.log(e)
                  let name = e.sourceTarget.options.name;
                  let PH = e.sourceTarget.options.PH;
                  let K = e.sourceTarget.options.K;
                  let N = e.sourceTarget.options.N;
                  let P = e.sourceTarget.options.P;
                  let organic = e.sourceTarget.options.organic;

                //添加Popup标注，显示一段文字和一幅图片
                var popup = L.popup().setLatLng([e.latlng.lat, e.latlng.lng]).setContent(
                `\
              <div class="gridViewPop">  
              <div><span>检测参数</span><span>检测结果</span></div>
              <div><span>地点</span><span>${name}</span></div>
              <div><span>PH值</span><span>${PH}</span></div>
              <div><span>速效钾mg/kg</span><span>${K}</span></div>
              <div><span>碱解氮mg/kg</span><span>${N}</span></div>
              <div><span>有效磷mg/kg</span><span>${P}</span></div>
              <div><span>有机质g/kg</span><span>${organic}</span></div>
              </div>
              `).openOn(me.map);
             // 
            });
            this.lyaers[layerName].addLayer(addedMarkers);
            }



          }
          if(!this.map.hasLayer(this.lyaers[layerName])){
            this.lyaers[layerName].addTo(this.map);
            this.map.fitBounds(polygon.getBounds());
          }
        },




        addMarkersTest(){
          let layerName = "addMarkers";
          let points = [{"P":"9.8","lng":119.26022627,"name":"1","PH":"7.37","K":"345","lat":42.40458722,"N":"99.7","organic":"26.1"},{"P":"17.5","lng":119.25850945,"name":"2","PH":"7.53","K":"458","lat":42.40407993,"N":"96.5","organic":"25.7"},{"P":"8.2","lng":119.25578502,"name":"3","PH":"7.54","K":"206","lat":42.40821534,"N":"63.8","organic":"11.0"},{"P":"3.4","lng":119.253661,"name":"4","PH":"7.38","K":"146","lat":42.40793023,"N":"60.4","organic":"10.8"},{"P":"5.8","lng":119.25398152,"name":"5","PH":"7.24","K":"180","lat":42.39910417,"N":"53.0","organic":"8.77"},{"P":"4.4","lng":119.25629873,"name":"6","PH":"7.68","K":"105","lat":42.39972213,"N":"45.1","organic":"8.03"},{"P":"2.8","lng":119.30003504,"name":"7","PH":"7.69","K":"160","lat":42.41324892,"N":"62.7","organic":"15.5"},{"P":"5.3","lng":119.29885278,"name":"8","PH":"7.66","K":"179","lat":42.41356406,"N":"72.4","organic":"15.1"},{"P":"24.0","lng":119.29649916,"name":"9","PH":"8.03","K":"215","lat":42.41432121,"N":"91.3","organic":"20.2"},{"P":"7.6","lng":119.29814357,"name":"10","PH":"7.97","K":"203","lat":42.4146483,"N":"84.4","organic":"19.6"},{"P":"33.6","lng":119.29643997,"name":"11","PH":"8.03","K":"388","lat":42.4137983,"N":"121","organic":"26.6"},{"P":"5.9","lng":119.30215927,"name":"12","PH":"8.02","K":"158","lat":42.42254357,"N":"76.1","organic":"16.2"},{"P":"5.9","lng":119.300246,"name":"13","PH":"8.09","K":"156","lat":42.42264366,"N":"80.9","organic":"16.2"},{"P":"2.2","lng":119.30081579,"name":"14","PH":"7.96","K":"121","lat":42.4234524,"N":"64.5","organic":"12.6"},{"P":"7.9","lng":119.33359808,"name":"15","PH":"8.01","K":"206","lat":42.41041655,"N":"65.6","organic":"14.7"},{"P":"5.0","lng":119.33544756,"name":"16","PH":"7.94","K":"126","lat":42.40867723,"N":"61.8","organic":"11.8"},{"P":"11.0","lng":119.33293117,"name":"17","PH":"7.92","K":"306","lat":42.40948047,"N":"76.0","organic":"21.2"},{"P":"3.3","lng":119.22636998,"name":"18","PH":"7.99","K":"121","lat":42.4148619,"N":"76.2","organic":"16.5"},{"P":"8.7","lng":119.22459182,"name":"19","PH":"7.96","K":"113","lat":42.41575894,"N":"46.5","organic":"11.0"},{"P":"2.3","lng":119.22577028,"name":"20","PH":"7.76","K":"112","lat":42.4164072,"N":"61.4","organic":"16.0"},{"P":"8.2","lng":119.25990184,"name":"21","PH":"7.90","K":"169","lat":42.38705982,"N":"60.8","organic":"11.0"},{"P":"1.8","lng":119.25881834,"name":"22","PH":"7.91","K":"97","lat":42.38839895,"N":"49.2","organic":"8.89"},{"P":"1.6","lng":119.26030988,"name":"23","PH":"8.09","K":"91","lat":42.38917577,"N":"57.8","organic":"10.9"},{"P":"3.5","lng":119.26097531,"name":"24","PH":"7.68","K":"110","lat":42.39016646,"N":"52.6","organic":"5.76"},{"P":"18.3","lng":119.26986189,"name":"25","PH":"7.77","K":"150","lat":42.38867986,"N":"52.3","organic":"7.52"},{"P":"3.5","lng":119.26704939,"name":"26","PH":"7.97","K":"157","lat":42.3881238,"N":"52.1","organic":"6.99"},{"P":"15.8","lng":119.26322866,"name":"27","PH":"7.78","K":"291","lat":42.38893077,"N":"91.8","organic":"20.8"},{"P":"4.6","lng":119.2696867,"name":"28","PH":"8.06","K":"117","lat":42.40209478,"N":"49.3","organic":"8.31"},{"P":"2.1","lng":119.27082978,"name":"29","PH":"8.48","K":"103","lat":42.40047116,"N":"53.8","organic":"5.76"},{"P":"12.2","lng":119.27362142,"name":"30","PH":"8.30","K":"189","lat":42.40172472,"N":"71.4","organic":"11.0"},{"P":"4.3","lng":119.28343825,"name":"31","PH":"8.10","K":"188","lat":42.40835623,"N":"78.9","organic":"15.0"},{"P":"10.1","lng":119.28515704,"name":"32","PH":"8.24","K":"211","lat":42.40867488,"N":"74.3","organic":"14.4"},{"P":"2.8","lng":119.28391077,"name":"33","PH":"8.23","K":"71","lat":42.40748525,"N":"68.5","organic":"13.6"},{"P":"6.2","lng":119.37368608,"name":"34","PH":"7.78","K":"144","lat":42.4606329,"N":"78.0","organic":"16.5"},{"P":"5.9","lng":119.37349274,"name":"35","PH":"8.17","K":"69","lat":42.46111948,"N":"75.3","organic":"13.8"},{"P":"3.9","lng":119.37162281,"name":"36","PH":"8.20","K":"78","lat":42.45995326,"N":"71.2","organic":"14.1"},{"P":"15.9","lng":119.37112856,"name":"37","PH":"7.99","K":"81","lat":42.46047502,"N":"68.3","organic":"12.5"},{"P":"37.3","lng":119.30400686,"name":"39","PH":"7.92","K":"90","lat":42.45049215,"N":"85.8","organic":"16.5"},{"P":"13.8","lng":119.30591541,"name":"38","PH":"7.92","K":"89","lat":42.45339281,"N":"76.1","organic":"11.9"},{"P":"11.8","lng":119.31537627,"name":"40","PH":"7.22","K":"118","lat":42.3762774,"N":"50.4","organic":"9.59"},{"P":"10.9","lng":119.31234406,"name":"41","PH":"7.78","K":"113","lat":42.37574896,"N":"65.0","organic":"8.44"},{"P":"3.4","lng":119.31378522,"name":"42","PH":"7.85","K":"72","lat":42.37841461,"N":"46.2","organic":"5.34"},{"P":"9.5","lng":119.32092433,"name":"43","PH":"7.66","K":"135","lat":42.37281572,"N":"67.0","organic":"13.7"},{"P":"3.5","lng":119.31923585,"name":"44","PH":"7.78","K":"125","lat":42.37140168,"N":"83.8","organic":"14.4"},{"P":"9.0","lng":119.32303171,"name":"45","PH":"7.79","K":"131","lat":42.37057638,"N":"65.6","organic":"10.8"},{"P":"5.1","lng":119.30071289,"name":"46","PH":"7.74","K":"115","lat":42.38096124,"N":"51.0","organic":"8.24"},{"P":"4.5","lng":119.29963792,"name":"47","PH":"7.66","K":"156","lat":42.38010368,"N":"80.0","organic":"17.7"},{"P":"2.7","lng":119.29930579,"name":"48","PH":"7.98","K":"68","lat":42.38748156,"N":"23.1","organic":"4.12"},{"P":"1.9","lng":119.29648974,"name":"49","PH":"7.89","K":"77","lat":42.38640771,"N":"60.9","organic":"8.23"},{"P":"5.0","lng":119.33632513,"name":"50","PH":"7.78","K":"83","lat":42.37934432,"N":"60.6","organic":"9.59"},{"P":"6.4","lng":119.33712045,"name":"51","PH":"8.33","K":"64","lat":42.3760011,"N":"31.5","organic":"4.25"},{"P":"4.7","lng":119.33927115,"name":"52","PH":"7.89","K":"97","lat":42.37511748,"N":"70.3","organic":"13.2"},{"P":"19.8","lng":119.26969586,"name":"53","PH":"8.09","K":"114","lat":42.50256127,"N":"76.1","organic":"12.8"},{"P":"4.2","lng":119.27066744,"name":"54","PH":"8.10","K":"94","lat":42.5027477,"N":"55.0","organic":"11.0"},{"P":"3.2","lng":119.24689623,"name":"55","PH":"8.02","K":"158","lat":42.49990496,"N":"56.8","organic":"5.61"},{"P":"7.3","lng":119.24602769,"name":"56","PH":"7.94","K":"199","lat":42.49996065,"N":"60.1","organic":"6.70"},{"P":"5.8","lng":119.35864153,"name":"57","PH":"8.01","K":"93","lat":42.48012392,"N":"80.1","organic":"9.35"},{"P":"2.1","lng":119.35686234,"name":"58","PH":"8.11","K":"115","lat":42.48069066,"N":"53.1","organic":"17.9"},{"P":"36.2","lng":119.38599132,"name":"59","PH":"7.96","K":"79","lat":42.49597858,"N":"53.5","organic":"8.32"},{"P":"5.3","lng":119.38725853,"name":"60","PH":"8.07","K":"129","lat":42.49605887,"N":"49.2","organic":"9.88"},{"P":"5.8","lng":119.36543662,"name":"61","PH":"7.84","K":"367","lat":42.4526055,"N":"73.8","organic":"9.59"},{"P":"41.3","lng":119.36461977,"name":"62","PH":"7.68","K":"394","lat":42.45295257,"N":"161","organic":"30.2"},{"P":"61.6","lng":119.34987142,"name":"63","PH":"8.04","K":"671","lat":42.42993257,"N":"75.1","organic":"19.9"},{"P":"13.8","lng":119.34855953,"name":"64","PH":"8.74","K":"114","lat":42.42962921,"N":"53.1","organic":"13.7"},{"P":"3.6","lng":119.22253304,"name":"65","PH":"8.51","K":"113","lat":42.43806409,"N":"50.1","organic":"12.2"},{"P":"5.8","lng":119.22281683,"name":"66","PH":"8.38","K":"159","lat":42.43767178,"N":"60.8","organic":"14.0"},{"P":"4.5","lng":119.2081091,"name":"67","PH":"8.33","K":"133","lat":42.40468221,"N":"55.4","organic":"11.5"},{"P":"15.3","lng":119.20786281,"name":"68","PH":"8.19","K":"232","lat":42.4043736,"N":"95.3","organic":"19.2"}]
          
          this.addMarkers(layerName,points)



        }

  }
  }
</script>
<style  scoped>
#map {
    width: auto;
    height: 600px;
}
</style>
<style lang="less">
.gridViewPop {
  display: flex;
  flex-direction: column;

  >div {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #3be6ff;
    margin: -1px;
    padding: 5px 50px;
    white-space: nowrap;
    gap: 20px;
    flex: 1;

    span {
      flex: 1;
      max-width: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    &:first-child {
      border-bottom: 2px solid #3be6ff;
      margin: 0;
      color: #3be6ff;
      display: flex;
      justify-content: space-between;

      span {
        display: inline;
      }
    }
  }
}
.pop {
  padding: 10px;
}

.leaflet-popup-content {
  border: none;
  margin: 0;
  // padding-right: 20px;
  line-height: 1.6;
  font-size: 18px;
  user-select: none;
}

.leaflet-popup-content-wrapper {
  background: #0a1c1acc;
  width: auto;
  color: #fff;
  box-shadow: none;
  margin: 0;
  // padding: 10px;
  box-sizing: border-box;
  border: 1px solid #49FDFF;
  border-radius: 6px;
}


</style>












